<!-- 指定会员的报名记录 -->
<template>
  <ele-card :body-style="{ paddingBottom: '2px' }">
    <ele-pro-table
      ref="tableRef"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      highlight-current-row
      border
      stripe
      row-click-checked
      row-key="id"
      :toolbar="false"
    >
      <template #status="{ row }">
        <el-tag :type="statusType(row.status)">
          {{ statusText(row.status) }}
        </el-tag>
      </template>
      <template #other="{ row }">
        <el-tag v-if="row.airplane === 1" type="warning">鸽子</el-tag>
        <el-tag v-if="row.accept === 1" type="success">录取</el-tag>
      </template>
      <template #title="{ row }">
        <span class="blue pointer" @click="showJob(row)">{{ row.title }}</span>
      </template>
      <template #time="{ row }">
        <el-tooltip
          v-if="row.status === 0"
          class="item"
          effect="dark"
          :content="'报名时间：' + row.apply_time"
          placement="top"
        >
          <el-button>{{ row.cancel_time }}</el-button>
        </el-tooltip>
        <span v-else>{{ row.apply_time }}</span>
      </template>
    </ele-pro-table>
    <!-- 工作详情 -->
    <job-detail v-model="showJobDetail" :job-id="jobId" />
  </ele-card>
</template>

<script setup>
  import { ref } from 'vue';

  import { getApplyRecordByStudenId } from '@/api/student';
  import JobDetail from '@/views/company/job/details/index.vue';

  const props = defineProps({
    /** 修改回显的数据 */
    memberId: Number
  });

  /** 表格实例 */
  const tableRef = ref(null);

  const jobId = ref(0);
  const showJobDetail = ref(false);

  // 职位详情
  const showJob = (row) => {
    jobId.value = row.belongs_id;
    showJobDetail.value = true;
  };

  /** 表格列配置 */
  const columns = ref([
    {
      label: '报名状态',
      width: 90,
      slot: 'status',
      align: 'center'
    },
    {
      label: '报名&退定时间',
      width: 150,
      slot: 'time'
    },
    {
      prop: 'title',
      label: '工作',
      slot: 'title'
    },
    {
      prop: 'work_date',
      label: '工作日期'
    },
    {
      slot: 'other',
      label: '其他',
      align: 'center',
      width: 80
    }
  ]);

  const statusText = (value) => {
    const cs = {
      1: '正常',
      0: '退定'
    };
    return cs[value];
  };
  const statusType = (state) => {
    const stateMap = {
      1: 'success',
      0: 'info'
    };
    return stateMap[state];
  };

  /** 表格数据源 */
  const datasource = ({ page, where, limit, orders }) => {
    return getApplyRecordByStudenId({
      ...where,
      ...orders,
      page,
      limit,
      member_id: props.memberId
    });
  };
</script>

<style scoped>
  .tools {
    display: flex;
    margin-bottom: 10px;
    .input {
      margin-right: 8px;
    }
  }
  .foot {
    margin-top: 10px;
    span {
      margin-left: 14px;
      font-size: 12px;
    }
  }
  .mr {
    margin-right: 8px;
  }
</style>
